import React from 'react';
import {
  View,
  Text,
  TextInput,
  Image,
  StyleSheet,
  TouchableOpacity,
} from 'react-native';

import {Button} from 'react-native-elements';
import dismissKeyboard from 'dismissKeyboard';

import Config from '../../config';
import BasePage from '../common/BasePage';
import Constants from '../../common/Constants';
import ImageConstants from '../../common/ImageConstants';
import CommonStyles from '../../common/CommonStyles';
import SizeUtils from '../../common/SizeUtils';

import LoginSendAction from '../../actions/login/LoginSendAction';
import RequestSmsAction from '../../actions/login/RequestSmsAction';

export default class BindPage extends BasePage {
  constructor(props) {
    super(props);

    //80621522
    this.state = {
      pageName: "BindPage",
      loadComplete: false,
      userNo: "",
      password: "",
      viewStatus: 1,
      authorization: "0",
      smsIntervalTick: -1,
      code:-1,
    }
    this._backgroudColor = "#ffffff";
    this._fontColor = "#000000";
  }

  shouldComponentUpdate(nextProps, nextState) {
    if(this.state.authorization == 0 && nextState.authorization != 0) {
      this.gotoPage(Config.pages.home);
      return false;
    }
    if (this.state.viewStatus != nextState.viewStatus) {
      if(nextState.viewStatus == 3) {
        this.smsInterval = setInterval(this._updateInterval.bind(this), 1000);
        this._updateInterval();
      }
      else {
        this._clearInterval();
      }
    }
    return true;
  }

  componentWillUnmout() {
    this._clearInterval();
  }

  _updateInterval() {
    var tick = this.state.smsIntervalTick == -1 ? 60 : this.state.smsIntervalTick - 1;
    if(tick == 0) {
      this._clearInterval();
      tick = -1;
    }
    this.setState({
      smsIntervalTick: tick,
    });
  }

  _clearInterval() {
    if(this.smsInterval) {
      clearInterval(this.smsInterval);
      this.smsInterval = null;
    }
  }

  render() {
    return (
      <View style={{flex:1, flexDirection:"column", backgroundColor:"#ffffff",
          paddingTop:SizeUtils.translateDesignHeightToCode(223)}}>
        <View style={{flexDirection:"row",
              height:SizeUtils.translateDesignHeightToCode(70),
              marginLeft:SizeUtils.translateDesignWidthToCode(40),
              marginBottom:SizeUtils.translateDesignHeightToCode(35),
              marginRight:SizeUtils.translateDesignWidthToCode(40),
              alignItems:"center", borderBottomColor:"#999999",
              borderBottomWidth:SizeUtils.translateDesignNumToCode(2)}}>
          <View style={{width:SizeUtils.translateDesignWidthToCode(100), alignItems:"center"}}>
            <Image source={ImageConstants.common_gonghao} />
          </View>
          <TextInput
            style={{
              padding:0,
              width:SizeUtils.translateDesignWidthToCode(250),
              borderWidth: 0, textAlignVertical: "top", fontSize:SizeUtils.translateFontSizeToCode(36),
              marginLeft:SizeUtils.translateDesignWidthToCode(32)}}
            onChangeText = {(userNo) => this.setState({userNo})}
            placeholder = "员工编号"
            multiline = {false}
            maxLength={11}
            keyboardType="numeric"
            value = {this.state.userNo}
            onBlur = {() => dismissKeyboard()}
          />
        </View>
        <View style={{flexDirection:"row",
              height:SizeUtils.translateDesignHeightToCode(70),
              marginLeft:SizeUtils.translateDesignWidthToCode(40),
              marginBottom:SizeUtils.translateDesignHeightToCode(35),
              marginRight:SizeUtils.translateDesignWidthToCode(40),
              justifyContent:"space-between",
              alignItems:"center", borderBottomColor:"#999999",
              borderBottomWidth:SizeUtils.translateDesignNumToCode(2)}}>
          <View style={{flexDirection:"row"}}>
            <View style={{width:SizeUtils.translateDesignWidthToCode(100), alignItems:"center"}}>
              <Image source={ImageConstants.common_phone}/>
            </View>
            <TextInput
              style={{padding:0,
                width:SizeUtils.translateDesignWidthToCode(250),
                borderWidth: 0, textAlignVertical: "top", fontSize:SizeUtils.translateFontSizeToCode(36),
                marginLeft:SizeUtils.translateDesignWidthToCode(32)}}
              onChangeText = {(password) => this.setState({password})}
              placeholder = "手机验证码"
              multiline = {false}
              maxLength={11}
              keyboardType="numeric"
              keyboardAppearance="dark"
              value = {this.state.password}
              onBlur = {() => dismissKeyboard()}
            />
          </View>
          <TouchableOpacity onPress = {() => this._onRequestSms()} style={{width:SizeUtils.translateDesignWidthToCode(250)}}
            disabled = {this.state.viewStatus == 3 && this.state.smsIntervalTick > 0}>
            <Text style={{fontSize:SizeUtils.translateFontSizeToCode(30), color:"#000000"}}>
              {this._getSmsBtnText()}
            </Text>
          </TouchableOpacity>
        </View>
        <View style={{flex:1, flexDirection:"column", alignItems:"center"}}>
          <Button
            backgroundColor="#db3132"
            disabled = {this.state.userNo == "" || this.state.password == ""}
            buttonStyle = {{width: SizeUtils.translateDesignWidthToCode(356), height:SizeUtils.translateDesignHeightToCode(80),
              marginTop:SizeUtils.translateDesignHeightToCode(412), borderRadius:30}}
            textStyle={{fontSize: SizeUtils.translateFontSizeToCode(30)}}
            title = "登录"
            onPress = {() => this._onPressLoginBtn()}
          />
          <Text style={{color:"#999999", fontSize: SizeUtils.translateFontSizeToCode(24),
            paddingTop: SizeUtils.translateDesignHeightToCode(20)}}>{this._renderSystemNotice()}</Text>
        </View>
        {this._renderNavigationBar()}
      </View>
    )
  }

  _renderNavigationBarLeftButtonContent() {
    return(
      <TouchableOpacity style={{width:SizeUtils.translateDesignWidthToCode(100)}} onPress={() => this.goBack()}>
        <Image source={ImageConstants.common_cha}
              />
      </TouchableOpacity>
    )
  }

  _getSmsBtnText()  {
    var text = "获取验证码";
    if(this.state.smsIntervalTick > 0) {
      text = text + "(" + this.state.smsIntervalTick + ")";
    }
    return text;
  }

  _renderSystemNotice() {
    let notice = "系统错误";
    let showCode = true;
    if(this.state.viewStatus == 1) {
      // return "";
    }
    else if(this.state.viewStatus == 2) {
      notice = "获取验证码中...";
      showCode = false;
    }
    else if(this.state.viewStatus == 3) {
      notice = "验证码已发送";
      showCode = false;
    }
    else if(this.state.viewStatus == 4) {
      notice = "登录中...";
      showCode = false;
    }
    else if(this.state.viewStatus == 5) {
      notice = "登录成功";
      showCode = false;
    }
    else if(this.state.viewStatus == 101) {
      notice = "验证码获取失败,未知错误";
    }
    else if(this.state.viewStatus == 102) {
      notice = "登录失败,验证码错误";
    }
    else if(this.state.viewStatus == 103) {
      notice = "登录失败,验证码已过期";
    }
    else if(this.state.viewStatus == 104) {
      notice = "验证码获取失败,未知用户";
    }
    else if(this.state.viewStatus == 105) {
      notice = "错误:验证码请求太频繁";
    }
    else if(this.state.viewStatus == 901) {
      notice = "请输入员工编号";
      showCode = false;
    }
    if(showCode) {
      notice = notice + ":" + this.state.code;
    }
    return notice;
  }

  _onPressLoginBtn() {
    dismissKeyboard();
    new LoginSendAction().call(this, {userNo: parseInt(this.state.userNo), smsCode: this.state.password,
        type: Constants.LOGIN_TYPE.USER})
  }

  _onRequestSms() {
    if(this.state.userNo == "") {
      this.setState({
        viewStatus: 901,
      })
    }
    else {
      new RequestSmsAction().call(this, {ee_no: parseInt(this.state.userNo)})
    }
  }
}

const styles = StyleSheet.create({
  midView: {

  },

  midText: {

  },

  midTextInput: {
  }
})
